import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { publicIp } from '@/services/apiIp'
const veWithToken = ({ src, token }) => {
  const [imageSrc, setImageSrc] = useState('')
  useEffect(() => {
    const fetchImage = async () => {
      try {
        const url = publicIp + '/' + src // 你的图片资源URL
        // 根据API需求选择正确的头字段，这里假设只需要Authorization
        const headers = {
          Authorization: 'token ' + sessionStorage.getItem('token'),
        }

        const response = await axios({
          method: 'GET',
          url,
          headers,
          responseType: 'blob', // 保留blob响应类型
        })
        // 创建一个 Blob URL，这样我们可以将其设置为 <video> 标签的 src
        const videoUrl = URL.createObjectURL(new Blob([response.data]))

        // 假设你有一个 <video> 元素
        const videoElement = document.querySelector('video')
        videoElement.src = videoUrl

        // 监听视频加载完成，释放 Blob URL
        videoElement.onloadedmetadata = function () {
          // 视频元数据已加载，可以开始播放
          // 如果你想在视频播放结束后释放 Blob URL，可以添加以下事件监听器
          videoElement.addEventListener(
            'ended',
            function () {
              URL.revokeObjectURL(videoUrl)
            },
            { once: true }
          )
        }
        videoElement.play()
      } catch (error) {
        console.error('Error fetching image:', error)
      }
    }
    fetchImage()
    const fat = (token) => {
      console.log(token)
      const videoElement = document.querySelector('video')
      videoElement.pause()
    }
  }, [token])
  return (
    <video style={{ width: '100%', height: '450px' }} controls>
      <source src={imageSrc} type="video/mp4" />
      {/* <source src='https://www.runoob.com/try/demo_source/movie.mp4' type="video/mp4" /> */}
      {/* 如果视频资源未加载，则显示提示信息 */}
      {!imageSrc && <p>Loading video...</p>}
      {/* 使用JavaScript的navigator对象来检测视频支持，而不是简单地显示不支持的文本 */}
      <script
        dangerouslySetInnerHTML={{
          __html: `
    if (!document.createElement('video').canPlayType) {
        document.write('<p>Your browser does not support the video tag.</p>');
    }
`,
        }}
      />
    </video>
  )
}

export default veWithToken
